<template>
  <div class="main">
    <el-table
      :data="shopowner"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column lable="头像" width="120">
        <template slot-scope="scope">  <!-- 使用template 标签表示把当前对象定义出来 包含行的对象所以 要访问值需要访问row属性-->
          <img :src="getImgUrl(scope.row.simg)" style="width: 30px;height: 30px"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="sno"
        label="编号"
        width="120">
      </el-table-column>
      <el-table-column
        prop="sname"
        label="姓名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="ssex"
        label="性別"
        width="120">
      </el-table-column>
      <el-table-column
        prop="spwd"
        label="密码"
        width="120">
      </el-table-column>
      <el-table-column
        prop="semail"
        label="邮箱"
        width="120">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEditShopowner(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDeleteShopowner(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="pageInfo.pageSize"
        layout="prev, pager, next, jumper"
        :total="pageInfo.itemCount">
      </el-pagination>
    </div>
    <el-button size="mini" @click="handleAddShopowner">
      新增
    </el-button>
          <addShopowner v-if="addDialogIsShow" ref="showAddShopowner"></addShopowner>
          <editShopowner v-if="editDialogIsShow" ref="showEditShopowner"></editShopowner>

  </div>
</template>

<script>
import api from "../../../../axios/api"
import addShopowner from '@/components/back/shopowner/addShopowner.vue'
 import editShopowner from '@/components/back/shopowner/editShopowner.vue'
export default {
  name: "index",
  addDialogIsShow:false,
  editDialogIsShow:false,
  components:{
    addShopowner,editShopowner
  },
  data(){
    return {
      shopowner:[],
      addDialogIsShow:false,
      editDialogIsShow:false,
      currentPage: 1,
      pageInfo:{}
    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.setDataFromAxios(val);
    },
    getImgUrl: function (imgsrc) {
      return  this.$store.state.host + "/upload/images/shopowner/" + imgsrc;
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex % 2 == 0) {
        return 'warning-row';
      } else {
        return '';
      }
      return '';
    },
    setDataFromAxios: function (currPage) {
      if(currPage!=null){
        this.currentPage = currPage;
      }
      //为什么要封装一下方法 1.每个vue组件有自己的一些参数处理，简化调用本来这个setDataFromAxios这个方法属于api 重新封装就属于当前页面
      api.setDataFromAxios("/api/shopownerController/getShopownerByPage?currPage="+this.currentPage+"&pageSize=2", null, "post")
        .then(res => {
          console.log(res)
          this.shopowner = res.tList;
          this.pageInfo = res.obj;
        });//.then方法 就是当服务器有返回的时候执行回调函数，对比jquery的ajax success:function（data）
    },
    handleEditShopowner:function(index,shopowner){
      console.log(index + "   "+ shopowner.sno);
      let _this = this;   //this代表方法调用者 this代表vue对象
      _this.editDialogIsShow = true;
      _this.$nextTick(() => {  //下一步操作
        _this.$refs.showEditShopowner.init(shopowner);  //找到vue对象中定义ref集合（$refs就是ref集合 上面ref定义的名字叫showAddShopowner）调用子组件的init方法
      })
    },
    handleDeleteShopowner:function(index,shopowner){
      //console.log(index + "   "+ row.sno);
      api.setDataFromAxios( "/api/shopownerController/deleteShopownerBySno/"+shopowner.sno, this.shopowners, "post")
      alert(shopowner.sno+"删除成功");
    },
    handleAddShopowner:function(){
      let _this = this;   //this代表方法调用者 this代表vue对象
      _this.addDialogIsShow = true;
      _this.$nextTick(() => {  //下一步操作
        _this.$refs.showAddShopowner.init();  //找到vue对象中定义ref集合（$refs就是ref集合 上面ref定义的名字叫showAddShopowner）调用子组件的init方法
      })
    }
  },
  created:function () {
    this.setDataFromAxios();//1.创建页面的时候 调用自定义的数据请求方法  而数据请求方法把得到数据赋值给了当前页面的变量
  }
}
</script>

<style scoped lang="stylus">
.main
  width 1000px
  margin 0 auto
/deep/ .warning-row  /*不写deep渲染出错*/
  background-color oldlace
</style>
